import { Button, InputNumber } from "antd";
import { useState, useReducer, useMemo } from "react";


const UseMemoPage = () => {
    const [inputValue, setInputValue] = useState(0);
    const [randomNum, setRandomNum] = useState(0);
    /**
     * inputValue改变后才会重新计算，其他数据修改只会返回上一次缓存的结果
     */
    const countMultiply = useMemo(() => {
        console.log("触发重新计算")
        return inputValue * 2
    }, [inputValue])
    console.log("触发渲染")
    return (
        <>
            <div>
                <InputNumber value={inputValue} onChange={(value) => { setInputValue(value) }}></InputNumber>

                {/* <Button>*2</Button>  */}
                <span>*2值：{countMultiply}</span>
            </div>
            <Button onClick={() => setRandomNum(Math.random())} className="my-4">重新设置一个随机值，触发渲染:{randomNum}</Button>
            <p>设置随机数不会触发countMultiply的重新计算</p>
        </>
    )
}
export default UseMemoPage;